<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/React/react.devlopment.js"></script>
    <script src="./lib/React/react-dom.development.js"></script>
    <!-- 引入 Babel 转码器 -->
    <script src="./lib/babel.min.js"></script>
    <style>
        .box {
            width: 500px;
            margin: 20px auto;
            border: 1px solid #ccc;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">
        /*
            a. 如果是多个元素并级，则一定需要一个根元素包裹
            b. 如果是单标签，则一定要加标签的结束符
            c. JSX 语法中输出指定的数据，需要使用 {} 
            d. 标签的属性值，如果是动态的，则不要加引号 ，也要使用 {}
            e. JSX 中的标签，如果要添加类样式 class 必须写成 className
            f. 标签的行内样式style，必须写成对象的形式
        */

        // 1. 需求: 根据数据渲染结构
        let data = {
            title: 'C罗进球被吹',
            content: '北京时间11月25日，在葡萄牙对阵加纳队的比赛中，C罗在比赛第31分钟远射破门，却被裁判吹掉。',
            imgSrc: 'https://pic.rmb.bdstatic.com/bjh/news/3fda027d62183793296ee9b97dff417c.gif'
        }

        // 2. 创建虚拟DOM
        const sObj = {color: 'red'}
        const vNode = <div className="box">
                <h2 style={sObj}>{data.title}</h2>
                <p>{data.content}</p>
                <img src={data.imgSrc} alt="" />
            </div>

        // console.log(vNode);
        // 3. 渲染到指定容器
        ReactDOM.render(
            vNode,
            document.querySelector('#app')
        )
    </script>
</body>
</html>